import { StyleSheet, View, Text, ScrollView, Alert } from "react-native";
import React from "react";

const CompListView = () => {
  return (
    <ScrollView style={styles.container}>
      <View style={styles.section}>
        <Text style={styles.title}>职能应用</Text>
        <View style={styles.row}>
          <View style={styles.iconContainer}>
            <View style={[styles.icon, { backgroundColor: "#FFC107" }]}>
              <Text style={styles.iconText}>📄</Text>
            </View>
            <Text style={styles.iconLabel}>CN签核追踪</Text>
          </View>
          <View style={styles.iconContainer}>
            <View style={[styles.icon, { backgroundColor: "#FFC107" }]}>
              <Text style={styles.iconText}>👤</Text>
            </View>
            <Text style={styles.iconLabel}>名片扫描</Text>
          </View>
          <View style={styles.iconContainer}>
            <View style={[styles.icon, { backgroundColor: "#FFC107" }]}>
              <Text style={styles.iconText}>📅</Text>
            </View>
            <Text style={styles.iconLabel}>工程行事历</Text>
          </View>
          <View style={styles.iconContainer}>
            <View style={[styles.icon, { backgroundColor: "#FFC107" }]}>
              <Text style={styles.iconText}>🏆</Text>
            </View>
            <Text style={styles.iconLabel}>精品案例</Text>
          </View>
        </View>
      </View>
      <View style={styles.divider} />
      <View style={styles.section}>
        <Text style={styles.title}>员工自助</Text>
        <View style={styles.grid}>
          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4A90E2" }]}>
                <Text style={styles.iconText}>📞</Text>
              </View>
              <Text style={styles.iconLabel}>VOIP电话</Text>
            </View>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4A90E2" }]}>
                <Text style={styles.iconText}>📋</Text>
              </View>
              <Text style={styles.iconLabel}>待办事项</Text>
            </View>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4A90E2" }]}>
                <Text style={styles.iconText}>💰</Text>
              </View>
              <Text style={styles.iconLabel}>新费用报销</Text>
            </View>
          </View>
          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4A90E2" }]}>
                <Text style={styles.iconText}>🔗</Text>
              </View>
              <Text style={styles.iconLabel}>知识库</Text>
            </View>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4A90E2" }]}>
                <Text style={styles.iconText}>🚗</Text>
              </View>
              <Text
                style={styles.iconLabel}
                onPress={() => Alert.alert("我是私车公用")}
              >
                私车公用
              </Text>
            </View>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4A90E2" }]}>
                <Text style={styles.iconText}>👤</Text>
              </View>
              <Text style={styles.iconLabel}>私车查一查</Text>
            </View>
          </View>
          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4A90E2" }]}>
                <Text style={styles.iconText}>💵</Text>
              </View>
              <Text style={styles.iconLabel}>税easy</Text>
            </View>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4A90E2" }]}>
                <Text style={styles.iconText}>📝</Text>
              </View>
              <Text
                style={styles.iconLabel}
                onPress={() => Alert.alert("我是对话框")}
              >
                请假单
              </Text>
            </View>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4A90E2" }]}>
                <Text style={styles.iconText}>💰</Text>
              </View>
              <Text style={styles.iconLabel}>费用报销</Text>
            </View>
          </View>
          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4A90E2" }]}>
                <Text style={styles.iconText}>📱</Text>
              </View>
              <Text style={styles.iconLabel}>资产盘点</Text>
            </View>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4A90E2" }]}>
                <Text style={styles.iconText}>⬇️</Text>
              </View>
              <Text style={styles.iconLabel}>邀请安装</Text>
            </View>
            <View style={styles.iconContainer}></View>
          </View>
        </View>
      </View>
      <View style={styles.divider} />
      <View style={styles.section}>
        <Text style={styles.title}>总部价值平台</Text>
        <View style={styles.grid}>
          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4CAF50" }]}>
                <Text style={styles.iconText}>💼</Text>
              </View>
              <Text style={styles.iconLabel}>企业滴滴</Text>
            </View>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4CAF50" }]}>
                <Text style={styles.iconText}>🌐</Text>
              </View>
              <Text style={styles.iconLabel}>办公地址</Text>
            </View>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4CAF50" }]}>
                <Text style={styles.iconText}>ℹ️</Text>
              </View>
              <Text style={styles.iconLabel}>协议酒店</Text>
            </View>
          </View>
          <View style={styles.row}>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4CAF50" }]}>
                <Text style={styles.iconText}>⛰️</Text>
              </View>
              <Text style={styles.iconLabel}>开票信息</Text>
            </View>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4CAF50" }]}>
                <Text style={styles.iconText}>🎓</Text>
              </View>
              <Text style={styles.iconLabel}>微课堂</Text>
            </View>
            <View style={styles.iconContainer}>
              <View style={[styles.icon, { backgroundColor: "#4CAF50" }]}>
                <Text style={styles.iconText}>🎓</Text>
              </View>
              <Text style={styles.iconLabel}>一点知识</Text>
            </View>
          </View>
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5F5F5",
  },
  section: {
    padding: 16,
  },
  title: {
    fontSize: 18,
    fontWeight: "bold",
    color: "black",
    marginBottom: 12,
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 16,
  },
  grid: {
    flexDirection: "column",
  },
  iconContainer: {
    alignItems: "center",
    width: 80,
  },
  icon: {
    width: 60,
    height: 60,
    borderRadius: 30,
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 8,
  },
  iconText: {
    fontSize: 24,
  },
  iconLabel: {
    fontSize: 12,
    textAlign: "center",
  },
  divider: {
    height: 1,
    backgroundColor: "#E0E0E0",
  },
});

export default CompListView;
